<!-- 新增空间 ｜ 合铺 -->
<template>
  <div>
    <el-dialog title="商铺" :visible.sync="dialogShow" width="65%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <el-form ref="form" :model="formModel" label-width="130px" size="small" label-position="right">
        <el-row>
          <el-col :span="12" v-if="isMerge">
            <el-form-item label="选择商铺" prop="shopKey" :rules="[{ required: true, message: '请选择商铺', trigger: 'blur' }]">
              <el-select v-model="formModel.shopKey" clearable multiple filterable placeholder="请选择">
                <el-option v-for="item in shopList" :key="item.primaryKey" :label="item.shopNumber" :value="item.primaryKey" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="!isMerge">
            <el-form-item label="空间类型" prop="spaceType" :rules="[{ required: true, message: '请选择空间类型', trigger: 'blur' }]">
              <el-select :disabled="isEdit ? false : true" v-model="formModel.spaceType" clearable placeholder="请选择">
                <el-option v-for="item in spaceList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="!isMerge && isShow('空间名称')">
            <el-form-item label="空间名称" prop="activityName" :rules="[{ required: true, message: '请输入空间名称', trigger: 'blur' }]">
              <el-input :readonly="isEdit ? false : true" maxlength="200" v-model="formModel.activityName" placeholder="请输入空间名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="!isMerge && isShow('商铺编码')">
            <el-form-item label="商铺编码">
              <el-input :readonly="true" maxlength="200" v-model="formModel.shopCode" placeholder="保存后自动生成" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="!isMerge && isShow('空间编码')">
            <el-form-item label="空间编码">
              <el-input :readonly="true" maxlength="200" v-model="formModel.activityCode" placeholder="保存后自动生成" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="!isMerge && isShow('编码')">
            <el-form-item label="编码">
              <el-input :readonly="true" maxlength="200" v-model="formModel.code" placeholder="保存后自动生成" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="!isMerge && isShow('名称')">
            <el-form-item label="名称">
              <el-input :readonly="false" maxlength="200" v-model="formModel.name" placeholder="名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="isShow('商铺门牌号')">
            <el-form-item label="商铺门牌号" prop="shopNumber" :rules="[{ required: true, message: '请输入商铺门牌号', trigger: 'blur' }]">
              <el-input :readonly="isEdit ? false : true" maxlength="200" v-model="formModel.shopNumber" placeholder="请输入" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="isShow('CAD面积')">
            <el-form-item label="CAD面积" prop="cadArea" :rules="[{ required: true, message: '请输入CAD面积', trigger: 'blur' }]">
              <el-input :readonly="isEdit ? false : true" v-model="formModel.cadArea" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="isShow('建筑面积')">
            <el-form-item label="建筑面积" prop="buildingArea" :rules="[{ required: true, message: '请输入建筑面积', trigger: 'blur' }]">
              <el-input :readonly="isEdit ? false : true" v-model="formModel.buildingArea" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="isShow('分摊建筑面积')">
            <el-form-item label="分摊建筑面积" prop="shareArea" :rules="[{ required: true, message: '请输入分摊建筑面积', trigger: 'blur' }]">
              <el-input :readonly="isEdit ? false : true" v-model="formModel.shareArea" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="isShow('规划用途')">
            <el-form-item label="规划用途" prop="planUse" :rules="[{ required: true, message: '请选择规划用途', trigger: 'change' }]">
              <el-select :disabled="isEdit ? false : true" v-model="formModel.planUse" clearable placeholder="请选择">
                <el-option v-for="item in purposeList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="isShow('生效时间')">
            <el-form-item label="生效时间" prop="effectiveDate" :rules="[{ required: true, message: '请选择生效时间', trigger: 'blur' }]">
              <el-date-picker :disabled="isEdit ? false : true" v-model="formModel.effectiveDate" type="date" :picker-options="pickerOptionsStart" value-format="timestamp" clearable placeholder="请选择"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="isShow('失效时间')">
            <el-form-item label="失效时间" prop="expirationDate" :rules="[{ required: true, message: '请选择失效时间', trigger: 'blur' }]">
              <el-date-picker :disabled="isEdit && formModel.effectiveDate ? false : true" v-model="formModel.expirationDate" type="date" :picker-options="pickerOptions" value-format="timestamp" clearable placeholder="请选择"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="isShow('商铺标签')">
            <el-form-item label="商铺标签" prop="shopTag" :rules="[{ required: false, message: '请输入商铺标签', trigger: 'blur' }]">
              <el-input :readonly="isEdit ? false : true" maxlength="200" v-model="formModel.shopTag" placeholder="请输入" clearable></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12" v-if="!isMerge && isShow('商铺状态')">
            <el-form-item label="商铺状态">
              <el-select readonly v-model="formModel.status" clearable placeholder="请选择">
                <el-option v-for="(item, i) in [{ label: '正常', value: '1' }]" :key="i" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="12" v-if="formModel.spaceType == '1' && !showHidBtn">
            <el-form-item label="" label-width="10px">
              <el-link type="primary" :underline="false" @click="goToRentHistory">租赁历史</el-link>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="hideDialog">取 消</el-button>
        <el-button v-if="formModel.primaryKey && isEdit && formModel.spaceType == '1' && (!formModel.positionX || formModel.positionX == 0)" size="small" type="primary" @click="separateShop">拆 铺</el-button>
        <el-button v-if="isEdit && (!formModel.positionX || formModel.positionX == 0)" size="small" type="primary" @click="confirmDialog">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { apiSpaceUpdate, apiShopAdd, apiSpaceAdd, apiShopMerge, apiSpaceCreate } from '../../../../api/building';
  import { dictList } from '../../../../api/common';
  import { requestTips, askDialog } from '../../../../assets/util';
  import { formValid } from '@/lib/utils';

  export default {
    props: {
      formModel: {
        type: Object,
        default: () => {
          return { fenqumingcheng: '', fenqushuoming: '' };
        },
      },
      dialogShow: {
        type: Boolean,
        default: false,
      },
      //是否合铺
      isMerge: {
        type: Boolean,
        default: false,
      },
      //是否可以编辑
      isEdit: {
        type: Boolean,
        default: false,
      },
      workId: {
        type: String,
        default: '',
      },
      spaceKey: {
        type: String,
        default: '',
      },
      shopList: {
        type: Array,
        default: () => {
          return [];
        },
      },
      spaceList: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },
    data() {
      return {
        arr1: ['1', '3', '9', '7', '4', '8'], // 1:商铺 2:活动空间 3:写字楼 4:设备间 5:楼道 6:消防通道 7:会议室 8:仓库 9:办公室
        purposeList: [],
        floorKey: '',
        version: '',
        pickerOptions: {
          disabledDate: time => {
            if (this.formModel.effectiveDate) {
              return time.getTime() < this.formModel.effectiveDate;
            }
          },
        },
        pickerOptionsStart: {
          disabledDate: time => {
            if (this.formModel.expirationDate) {
              return time.getTime() > this.formModel.expirationDate;
            }
          },
        },
      };
    },
    watch: {
      formModel: {
        immediate: true,
        deep: true,
        handler(val) {
          if (this.arr1.includes(val.spaceType)) {
            this.formModel.status = '1';
          }
          this.showHidBtn = val.shopKey ? true : false
        },
      },
    },
    mounted() {},

    created() {
      
      this.getDictionary();
    },

    methods: {
      isShow(text) {
        let arr2 = ['5', '6'];
        let arr3 = ['2'];
        if (this.arr1.includes(this.formModel.spaceType)) {
          let arr11 = ['商铺编码', '商铺门牌号', 'CAD面积', '建筑面积', '分摊建筑面积', '规划用途', '生效时间', '失效时间', '商铺标签', '商铺状态'];
          if (arr11.includes(text)) return true;
          return false;
        } else if (arr2.includes(this.formModel.spaceType)) {
          let arr11 = ['编码', '名称'];
          if (arr11.includes(text)) return true;
          return false;
        } else if (arr3.includes(this.formModel.spaceType)) {
          let arr11 = ['空间类型', '空间名称', '空间编码', 'CAD面积', '规划用途', '生效时间', '失效时间'];
          if (arr11.includes(text)) return true;
          return false;
        }
        return false;
      },
      goToRentHistory() {
        window.open('/businessAssets/rentHistory?primaryKey=' + this.formModel.primaryKey);
      },
      //字典
      async getDictionary() {
        let res = await dictList({
          dictType: 'planning_type',
        });
        this.purposeList = res.rows || [];
      },
      //保存
      confirmDialog() {
        formValid(this, 'form', this.saveFn);
      },
      async saveFn() {
        let res = {};
        //新增时确定点位坐标
        if (!this.formModel.primaryKey) {
          this.formModel.floorKey = this.floorKey;
          this.formModel.spaceKey = this.spaceKey;
          this.formModel.workId = this.workId;
          this.formModel.version = this.version;
        }
        //合铺
        if (this.isMerge) {
          if (this.formModel.shopKey.length < 2) {
            this.$message.warning("至少选择两个商铺！")
            return
          }
          res = await apiShopMerge(this.formModel);
        }
        //新增空间
        else {
          let params = this.getParams()
          if (this.arr1.includes(this.formModel.spaceType)) {
            // 1:商铺  3:写字楼 4:设备间  7:会议室 8:仓库 9:办公室
            res = this.formModel.primaryKey ? await apiSpaceUpdate(params) : await apiShopAdd(params);
          } else if (this.formModel.spaceType == '5' || this.formModel.spaceType == '6') {
            //5:楼道 6:消防通道
            params.source = 0
            params.operateAction = 0
            params.targetType = params.spaceType
            res = this.formModel.primaryKey ? await apiSpaceUpdate(params) : await apiSpaceCreate(params);
          } else if (this.formModel.spaceType == '2') {
            //2:活动空间
            res = this.formModel.primaryKey ? await apiSpaceUpdate(params) : await apiSpaceAdd(params);
          }
        }
        requestTips(res, () => {
          this.areaDialog = false;
          this.$emit('reloadAssetsData', this.floorKey);
        });
      },
      //获取保存的参数
      getParams() {
        let params = {primaryKey:this.formModel.pointKey}
        this.formModel.positionY = String(this.formModel.positionY)
        if (this.formModel.primaryKey) {
          if (this.arr1.includes(this.formModel.spaceType)) {
            params.shopInfo = this.formModel
          } else if (this.formModel.spaceType == '5' || this.formModel.spaceType == '6') {
            params.spaceInfo = this.formModel
          } else if (this.formModel.spaceType == '2') {
            params.activitySpaceInfo = this.formModel
          }
        } else {
          params = this.formModel;
        }
        return params
      },
      //拆铺
      separateShop() {
        this.$emit('separateShop', this.notMoveList, this.version);
      },
      //设置一些值
      setFloorData(key, version) {
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
          if (this.isMerge) {
            this.formModel.spaceType = '1';
          }
        });
        this.floorKey = key;
        this.version = version;
      },
      hideDialog() {
        this.$refs.form.clearValidate();
        this.$emit('hideDialog');
      },
    },
  };
</script>
<style lang="scss" scoped>
  ::v-deep .el-link--inner {
    font-size: 16px;
  }
</style>
